<template>
	<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" draggable width="600px">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="昵称" prop="nickName">
						<el-input v-model="dataForm.nickName" placeholder="昵称"></el-input>
						<el-button @click="generateRandomNickName" type="text"
							>随机生成昵称<el-icon><Loading /></el-icon
						></el-button>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机号" prop="mobile">
						<el-input v-if="phoneStatus == 1" v-model="dataForm.mobile" placeholder="手机号" disabled></el-input>
						<el-input v-else v-model="dataForm.mobile" placeholder="手机号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="账号" prop="account">
						<el-input v-model="dataForm.account" placeholder="账号" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="密码" prop="password">
						<el-input v-model="dataForm.password" type="password" placeholder="密码" show-password></el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="头像" prop="avatar">
						<el-input v-model="dataForm.avatar" placeholder="头像URL"></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="12">
					<el-form-item label="真实姓名" prop="realname">
						<el-input v-model="dataForm.realname" placeholder="真实姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出生日期" prop="birthday">
						<el-date-picker v-model="dataForm.birthday" type="date" placeholder="出生日期" style="width: 100%"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="gender">
						<el-select v-model="dataForm.gender" placeholder="请选择性别" style="width: 100%">
							<el-option label="男" :value="0"></el-option>
							<el-option label="女" :value="1"></el-option>
							<el-option label="未知" :value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="微信号" prop="wechatId">
						<el-input v-model="dataForm.wechatId" placeholder="微信号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="用户状态" prop="status">
						<el-select v-model="dataForm.status" placeholder="请选择状态" style="width: 100%">
							<el-option label="停用" :value="0"></el-option>
							<el-option label="正常" :value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="论坛权限" prop="forumPermission">
						<el-select v-model="dataForm.forumPermission" placeholder="请选择权限" style="width: 100%">
							<el-option label="禁用" :value="0"></el-option>
							<el-option label="正常" :value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="评论发言权限" prop="commentPermission">
						<el-select v-model="dataForm.commentPermission" placeholder="请选择权限" style="width: 100%">
							<el-option label="禁用" :value="0"></el-option>
							<el-option label="正常" :value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useUserApi, useUserSubmitApi } from '@/api/kyy/user'

const emit = defineEmits(['refreshDataList'])

const visible = defineModel<boolean>('visible')
const dataFormRef = ref()

const dataForm = reactive({
	id: '',
	nickName: '',
	mobile: '',
	account: '',
	password: '',
	avatar: '',
	realname: '',
	birthday: '',
	gender: '',
	email: '',
	wechatId: '',
	lastLoginIp: '',
	lastLoginTime: '',
	status: '',
	deleted: '',
	creator: '',
	forumPermission: '',
	commentPermission: '',
	speakPermission: '',
	createTime: '',
	updater: '',
	updateTime: ''
})

// 手机号状态  0代表无  1代表有
const phoneStatus = ref(0)

// 随机生成昵称的函数
const generateRandomNickName = () => {
	// const randomNick = '用户_' + Math.random().toString(36).substring(2, 8); // 生成随机字符串
	const random = [
		'元气',
		'迷糊',
		'贪吃',
		'傲娇',
		'呆萌',
		'高冷',
		'爱笑',
		'迷糊',
		'腼腆',
		'淡定',
		'顽皮',
		'搞怪',
		'机警',
		'慵懒',
		'甜美',
		'元气',
		'软萌',
		'治愈',
		'爱玩',
		'佛系',
		'中二',
		'神秘',
		'知性',
		'优雅',
		'洒脱',
		'耀眼',
		'璀璨',
		'灵动',
		'悠然',
		'飒爽',
		'霸气',
		'沉稳'
	]
	const nick = [
		'小熊猫',
		'小考拉',
		'小仓鼠',
		'小柴犬',
		'小龙猫',
		'小熊猫',
		'小布偶',
		'小雪貂',
		'小奶豹',
		'小锦鲤',
		'小蝴蝶',
		'小鲸鱼',
		'小章鱼',
		'小蘑菇',
		'小云朵',
		'小星星',
		'小月亮',
		'小彩虹',
		'小雪花',
		'小浪花',
		'小枫叶',
		'小雏菊',
		'小棉花',
		'小奶糖',
		'小饼干',
		'小布丁',
		'小果冻',
		'小汤圆'
	]
	const randomNick = random[Math.floor(Math.random() * random.length)] + nick[Math.floor(Math.random() * nick.length)]
	dataForm.nickName = randomNick // 设置到表单中
}

// 表单账号显示初始化
const init = (id?: number) => {
	if (id) {
		phoneStatus.value = 1
		getUser(id)
	} else {
		dataForm.account = '账号随机生成'
	}
}

const getUser = (id: number) => {
	useUserApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}

const dataRules = ref({
	nickName: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],
	mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
	// account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
	gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
})

// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate(async (valid: boolean) => {
		if (!valid) {
			return false
		}
		useUserSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})
</script>

<style scoped>
.el-dialog :deep(.el-dialog__body) {
	padding: 20px 30px;
}

.el-form-item {
	margin-bottom: 18px;
}
</style>
